<template>
    <view
        class="item-info"
        :class="openShow === 0 ? 'none' : openShow === 1 ? 'show' : ''"
    >
        <view class="cate-content">
            <view class="item-fixed-top">
                <view class="title">{{ title }}</view>
                <view class="close" @click="close">
                    <image
                        src="../../static/images/close.png"
                        mode="scaleToFill"
                    ></image>
                </view>
            </view>
            <div class="details-all">
                <div class="details-top">
                    <div class="details-num">
                        <div class="title">销售额</div>
                        <div class="num">{{ countAll.sell_amount }}</div>
                    </div>
                    <div class="details-num">
                        <div class="title">利润额</div>
                        <div class="num">{{ countAll.sell_amount }}</div>
                    </div>
                </div>
                <div class="details-bottom">
                    <div class="details-num">
                        <div class="title">进货额</div>
                        <div class="num">{{ countAll.sell_amount }}</div>
                    </div>
                    <div class="details-num">
                        <div class="title">销售额</div>
                        <div class="num">{{ countAll.sell_amount }}</div>
                    </div>
                    <div class="details-num">
                        <div class="title">进货量</div>
                        <div class="num">{{ countAll.sell_amount }}</div>
                    </div>
                </div>
            </div>
            <div class="list-day-box comm-list" v-infinite-scroll="loadFun">
                <div
                    class="list-day-row"
                    v-for="(item, index) in data_list"
                    :key="index"
                >
                    <div class="list-day-info">
                        <div class="tiem">{{ item.timestr }}</div>
                        <div class="num">
                            <span>利润额 {{ item.sell_amount }}</span>
                            <span>进货额 {{ item.sell_amount }}</span>
                            <span>销售额 {{ item.sell_amount }}</span>
                        </div>
                    </div>
                    <div
                        class="list-row"
                        v-for="(items, indexs) in item.ls"
                        :key="indexs"
                    >
                        <div class="user-info">
                            <div class="user">
                                <span>{{ items.h_i }}</span>
                                <span>{{ items.customer_name }}</span>
                                <span>{{ items.cellphone }}</span>
                            </div>
                            <div class="num">利润{{ items.amount }}</div>
                        </div>
                        <div class="good-info">
                            <div class="img-box">
                                <img :src="items.img ? items.img : img_buf" />
                            </div>
                            <div class="info">
                                <div class="title">
                                    {{ items.title }}
                                </div>
                                <div class="doc">AHC | AHC水乳套装 680771</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </view>
    </view>
</template>

<script>
import staticConst from "@/js/const/StaticConst.js";

export default {
    props: [],
    components: {},
    computed: {},
    data() {
        return {
            img_buf: staticConst.GOOD_IMG,
            openShow: 0,
            title: "",
            data_list: [],
            countAll: {},
        };
    },
    created() {},
    mounted() {},
    methods: {
        show(type, data) {
            console.log(data, "data");
            let timer = type === "show" ? 10 : 200;
            let state = type === "show" ? 1 : 0;
            this.openShow = 2;
            setTimeout(() => {
                this.openShow = state;
            }, timer);
            if (!type) return;
            this.title = data.title;
            this.data_list = data.detailed_list;
            this.countAll = data.count_all;
        },
        close() {
            this.show();
        },
        loadFun() {
            this.$emit("loadFun");
        },
    },
};
</script>

<style lang="scss" scoped >
.item-info {
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    background: #fff;
    transition: 0.3s;
    overflow-y: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    .cate-content {
        border-radius: 6px;
        overflow: hidden;
        width: 500px;
        height: 600px;
        background: #f8f8f8;
        float: right;
        transform: translateY(-100%);
        transition: 0.3s;
        position: relative;
        .item-fixed-top {
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            border-bottom: 1px solid #ececec;
            .title {
                font-size: 18px;
                font-weight: bold;
            }
            .close {
                position: absolute;
                right: 5px;
                top: 12px;
                width: 32px;
                height: 32px;
                text-align: center;
                cursor: pointer;
                image {
                    width: 14px;
                    height: 14px;
                }
            }
        }
    }
    .details-all {
        padding: 5px 10px;
        border-bottom: 1px solid #ededed;
        .details-top {
            display: flex;
            .details-num {
                font-size: 14px;
                margin-right: 20px;
                .num {
                    font-size: 26px;
                    color: #3388ff;
                    font-weight: bold;
                }
            }
        }
        .details-bottom {
            display: flex;
            .details-num {
                margin-right: 20px;
                font-size: 14px;
            }
        }
    }
    .list-day-box {
        height: calc(100% - 212px);
        border-bottom: 1px solid #ededed;

        .list-day-row {
            .list-day-info {
                padding: 7.5px;
                background: #f3f3f2;
                color: #666;
                font-size: 14px;
                display: flex;
                justify-content: space-between;

                .num {
                    span {
                        margin-left: 10px;
                    }
                }
            }
            .list-row {
                padding: 10px;
                border-bottom: 1px solid #ededed;
                &:last-child {
                    border: none;
                }
                .user-info {
                    font-weight: bold;
                    font-size: 14px;
                    display: flex;
                    margin-bottom: 10px;
                    justify-content: space-between;
                    .user {
                        span {
                            margin-right: 10px;
                        }
                    }
                }
                .good-info {
                    display: flex;
                    .img-box {
                        margin-right: 10px;
                        width: 60px;
                        height: 60px;
                        border-radius: 5px;
                        overflow: hidden;
                        background: #ededed;
                        img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                        }
                    }
                    .info {
                        width: calc(100% - 90px);
                        display: flex;
                        align-content: space-between;
                        flex-wrap: wrap;
                        .title {
                            width: 100%;
                        }
                        .doc {
                            width: 100%;
                        }
                    }
                }
            }
        }
    }
}
</style>
